<template>
  <div>
    <button @click="handleMinus">-</button>
    <!-- {{ count }} -->
    {{ state.count }}
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
// 第一种方式
// import { ref } from 'vue'

// export default {
//   setup () {
//     const count = ref(0)
//     const handleMinus = () => count.value--
//     const handleAdd = (_) => count.value++
//     return {
//       count,
//       handleMinus,
//       handleAdd
//     }
//   }
// }

// 第二种方式
// import { useCount } from './hooks/useCount'
// export default {
//   setup () {
//     const { count, handleMinus, handleAdd } = useCount()
//     return {
//       count, handleMinus, handleAdd
//     }
//   }
// }

// 第三种方式
import { reactive } from 'vue'
import { useCount } from './hooks/useCount'
export default {
  setup () {
    const { count, handleMinus, handleAdd } = useCount()
    const state = reactive({
      name: '孙小双',
      age: 22,
      count
    })
    return {
      state,
      handleMinus,
      handleAdd
    }
  }
}
</script>
